<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'通知'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "10">
        <div class="analyItem anItemBor" v-for="(item,index) in appMessage" :key="index" @click="clickFourShow(index)">
            <p class="analyItemTit tx-center" style="background:#fff">
                <img :src="item.image" alt=""  width="55px">
            </p>
            <div class="analyItemCon">
                <p class="col-md-12">
                    <span class="fl fz14">{{item.group_name}}</span>
                </p>
                 <p class="col-md-12">
                    <span class="cLightGray">{{item.txt}}</span>
                </p>
            </div>
        </div>

    </div>
            <!-- 四段渲染容器 -->
    <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
        <!-- 问题 threeresultDetail -->
        <rx-huodong v-if="fourIndex === 0" :key="0"></rx-huodong>
        <rx-shijian v-if="fourIndex === 1" :key="1"></rx-shijian>
        <rx-yewu v-if="fourIndex === 2" :key="2"></rx-yewu>
        <rx-hongbao v-if="fourIndex === 3" :key="3"></rx-hongbao>
        <rx-qita v-if="fourIndex === 4" :key="4"></rx-qita>
    </transition-group>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
// eslint-disable-next-line standard/object-curly-even-spacing
import {getAppNoticeGroup} from '../../Resources/Api/index'
import rxHuodong from './message/huodong'
import rxShijian from './message/shijian'
import rxYewu from './message/yewu'
import rxHongbao from './message/hongbao'
import rxQita from './message/qita'
export default {
    data () {
        return {
            appMessage: {},
            fourIndex: undefined
        }
    },
    components: {
        rxHuodong,
        rxShijian,
        rxYewu,
        rxHongbao,
        rxQita
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.AppNoticeGroup()
    },
    methods: {
        AppNoticeGroup () {
            this.appMessage = {}
            getAppNoticeGroup({
                CardNo: this.leftInfo.app_cardNo,
                IsApp: 5
            }).then(result => {
                this.appMessage = result.data.Body
            }).catch(err => {
                console.log(err)
            })
        },
        clickFourShow (index) {
            this.fourIndex = index
        }
    },
    watch: {
        leftInfo () {
            this.AppNoticeGroup()
        }
    }
}
</script>
